﻿@model Auction_Intranet.Models.BidModel

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<div class="form-makebid black-shadow-box">
@using (Html.BeginForm("MakeBidMobile", "MakeBidMobile", FormMethod.Post, new { @class = "make-bid-form" }))
{    
        <legend>Bid information</legend>
        <div class="form-makebid-errors">          
            @Html.ValidationSummary(true)
            @Html.ValidationMessageFor(model => model.bidForId)
            @Html.ValidationMessageFor(model => model.groups)
            @Html.ValidationMessageFor(model => model.date)
            @Html.ValidationMessageFor(model => model.dateFinal)
            @Html.ValidationMessageFor(model => model.startTime)
            @Html.ValidationMessageFor(model => model.endTime)
            @Html.ValidationMessageFor(model => model.roomId)
            @Html.ValidationMessageFor(model => model.biddingAmount)
            <div class="make-bid-form-errors">
            </div>
        </div> 
        <div class="editor-field for-choose">
            <div class="for-choose-labels">
                <p>@Html.RadioButtonFor(model => model.bidForId, Model.bidFor[0].Value, new { @class = "single-selection selected", @checked = "checked" }) @Html.LabelFor(model => model.bidForId, Model.userName)</p>                
                <p>@Html.RadioButtonFor(model => model.bidForId, Model.bidFor[1].Value, new { @class = "group-selection", id = "group-selection" }) <label for="group-selection" >Group:</label></p>
            </div>
            <div class="editor-field groups-list">                
                <select class="group-selection-list" id="groupId" name="groupId" disabled="disabled">
                    @foreach (var opt in Model.groups)
                    {
                        <option class="group-option" value="@opt.Value">@opt.Text</option>
                    }
                </select>
                @Html.ValidationMessageFor(model => model.groupId)
                <div class="hide">                    
                    @foreach (var item in Model.groupsCredit)
                    {
                        <p class="group-balance-@item.Id" data-val="@item.Balance"></p>
                    }
                </div>
            </div>
        </div>

        <div class="date-bid">
            <div class="editor-label">
                @Html.LabelFor(model => model.date)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.date, new { @class = "datepicker-mobile",autocomplete = "off", placeholder = "Bid date" })                
            </div>
        </div>

        <div class="hide editor-label">
            @Html.LabelFor(model => model.dateFinal)
        </div>
        <div class=" hide editor-field">
            @Html.TextBoxFor(model => model.dateFinal)
            
        </div>

        <div class="start-time">
            <div class="editor-label">
                @Html.LabelFor(model => model.startTime)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.startTime, Model.startTimes, new { @class = "start-times-list" })                
            </div>
        </div>

        <div class="end-time">
            <div class="editor-label">
                @Html.LabelFor(model => model.endTime)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.endTime, Model.endTimes, new { @class = "end-times-list" })
            </div>
        </div>
             
        <div class="editor-label">
            @Html.Label("Room")
        </div>
        <div class="editor-field rooms-list">
            @{int ctn = 1;}
            @foreach (var item in Model.rooms)
            {
                if (item.Value == "-1")
                {
                    <p>
                        @Html.RadioButtonFor(model => model.roomId, item.Value, new { id = "any-room", @class = "selected", @checked = "checked" })
                        <span><label for="any-room">@item.Text<span class="room-description">: Any room will be choosen.</span></label></span>
                    </p>
                }
                else
                { 
                    <p>
                        @Html.RadioButtonFor(model => model.roomId, item.Value, new { id = "room-" + ctn })
                        <span><label for="room-@ctn">@item.Text<span class="room-description"> - Capacity: @Model.roomsAvailable.ElementAt(0).Capacity persons</span></label></span>
                    </p>
                }
                ctn++;
            }           
        </div>

        <div class="hide editor-label">
            @Html.LabelFor(model => model.availableCredit)
        </div>
        <div class="hide editor-field available-credit">
            @Html.EditorFor(model => model.availableCredit)
            @Html.ValidationMessageFor(model => model.availableCredit)
        </div>

        <div class="amounts">
            <div class="editor-label amount-label">
                @Html.LabelFor(model => model.biddingAmount)
                <p>Available: <span class="available-balance">@Model.availableCredit</span></p>
            </div>
            <div class="editor-field spinner-label">
                @Html.TextBoxFor(model => model.biddingAmount, new { @class = "spinner-make-bid ", autocomplete = "off", placeholder = "bid amount" })         
            </div>
        </div>
        <p>
            <input type="submit" value="Submit" class="input-button" title="Make Bid" onclick="return validateMakeBid()"/> <input type="button" value="Cancel" class="input-button" title="Cancel" onclick="return window.history.back();"/>
        </p>  
}
</div>

<script type="text/javascript">

    $(function () {        

        var i = 0;
        $('.start-times-list option').each(function(){
            $(this).addClass(i.toString());
            i++;
        });
        var i = 0;
        $('.end-times-list option').each(function(){
            $(this).addClass(i.toString());
            i++;
        });
        $(".start-times-list").live("change",function () {
            $('.end-times-list option').each(function(){
                $(this).show();
            });
            var optionClass = parseInt($(this).find(":selected").attr("class"));
            $('.end-times-list option').each(function(){
                var option = $(this);
                var optionClassEnd = parseInt(option.attr("class"));
                if(optionClassEnd < optionClass)
                {
                    option.hide();
                }              
            });
        });

        $( ".spinner-make-bid" ).spinner({
            max: $(".available-credit input").val(),
            min: 1
        });        
        $(".datepicker-mobile").datepicker("option", "minDate", new Date( @Model.date.Year , @Model.date.Month-1, @Model.date.Day));
        $(".datepicker-mobile").datepicker( "option", "maxDate", new Date( @Model.dateFinal.Year , @Model.dateFinal.Month-1, @Model.dateFinal.Day));
    });
</script>